{% extends "view/home/mobile/inc_base.html" %}
{% block style %}
<link rel="stylesheet" href="/static/mobile/css/feedback.css">
<link rel="stylesheet" href="/static/mobile/libs/deitor.wang/css/wangEditor-mobile.css">
<style>
    *{
        -webkit-user-select:text;
    }
</style>
{% endblock %}
{%block bodyattr%} class="feedback"{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">保存</button>
    <h1 class="mui-title">发布问题</h1>
</header>
<div class="mui-content">
    <form role="form" class="validate" action="/mod/question/sys/update" method="post" >
    <div class="mui-content-padded">
        <div class="mui-inline">问题标题</div>
        {% groups data="groups",cid=category.id%}
        <a class="mui-pull-right mui-inline group" href="#group" {%if groups|length == 0%}style="display: none"{%endif%}>
            <input type="hidden" value="0" name="group_id">
           <span>选择分组</span>
            <span class="mui-icon mui-icon-arrowdown"></span>
        </a>
        <!--快捷输入具体内容，开发者可自己替换常用语-->
        <div id="group" class="mui-popover">
            <div class="mui-popover-arrow"></div>
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell" data-value="0"><a href="javascript:;">不分组</a></li>
                        {%for v in groups%}
                        <li class="mui-table-view-cell" data-value="{{v.id}}"><a href="javascript:;">{{v.name}}</a></li>
                        {%endfor%}
                    </ul>
                </div>
            </div>

        </div>

        <a class="mui-pull-right mui-inline cate" href="#cate" >
            <input type="hidden" value="{%if category.allow_publish==0%}0{%else%}{{category.id}}{%endif%}" name="category_id">
            <span>{%if category.allow_publish==0%}选择分类{%else%}{{category.title}}{%endif%}</span>
            <span class="mui-icon mui-icon-arrowdown"></span>
        </a>
        <!--快捷输入具体内容，开发者可自己替换常用语-->
        <div id="cate" class="mui-popover">
            <div class="mui-popover-arrow"></div>
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view">
                        {%column data="column",pid=breadcrumb[0].id%}
                        {%if breadcrumb[0].allow_publish==1%}
                        <li class="mui-table-view-cell" data-value="{{breadcrumb[0].id}}"><a href="javascript:;">{{breadcrumb[0].title}}</a></li>
                        {%endif%}
                        {%if column%}
                        {%for val in column%}
                        <li class="mui-table-view-cell" data-value="{{val.id}}"><a href="javascript:;">{{val.name}}</a></li>
                        {%endfor%}
                        {%endif%}
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <div class=" mui-input-row">
        <input id='title' type="text" name="title" class="mui-input-clear contact" placeholder="问题标题" />

    </div>
    <div class="mui-content-padded">
        <div class="mui-inline">问题标题</div>
    </div>
    <div class="mui-input-row" style="height: 250px">
        <textarea id='detail' name="detail" class="question" placeholder="请详细描述你的问题..." style="height: 100%;width: 100%">
            <p>请输入内容...</p>
        </textarea>
    </div>
    <div class=" mui-inline anonymous" style="width: 200px">
        <div class="mui-table-view-cell">
            <span></span>
            <div class="mui-switch mui-switch-blue">
                <div class="mui-switch-handle"></div>
            </div>
        </div>
    </div>
    {#
    <div class="mui-content-padded">
        <div class="mui-inline">应用评分</div>
        <div class="icons mui-inline" style="margin-left: 6px;">
            <i data-index="1" class="mui-icon mui-icon-star"></i>
            <i data-index="2" class="mui-icon mui-icon-star"></i>
            <i data-index="3" class="mui-icon mui-icon-star"></i>
            <i data-index="4" class="mui-icon mui-icon-star"></i>
            <i data-index="5" class="mui-icon mui-icon-star"></i>
        </div>
    </div>
    #}<br />
        <input type="hidden" checked="" name="anonymous" value="0">
    <input type="hidden" name="backurl" value="{{ctx.referrer()}}" >
    <input type="hidden" name="mod_id" value="{{controller.mod.id}}">
    </form>
</div>
{% endblock%}

{% block script %}
<script src="/static/mobile/libs/deitor.wang/js/lib/zepto.js"></script>
<script src="/static/mobile/libs/deitor.wang/js/lib/zepto.touch.js"></script>
<script src="/static/mobile/libs/deitor.wang/js/wangEditor-mobile.js"></script>
<script src="/static/mobile/js/question.js"></script>
<script type="text/javascript">
    mui.init();
            $(function () {
                // ___E 三个下划线
                var editor = new ___E('detail');
                // 上传图片
                editor.config.uploadImgUrl = '/ext/attachment/homefile/uploadpic/?type=mwangEditor';
                editor.init();
            });
            mui('.anonymous .mui-switch').each(function() { //循环所有toggle
                //toggle.classList.contains('mui-active') 可识别该toggle的开关状态
                this.parentNode.querySelector('span').innerText = '匿名：' + (this.classList.contains('mui-active') ? '是' : '否');
                /**
                 * toggle 事件监听
                 */

                this.addEventListener('toggle', function(event) {
                    //event.detail.isActive 可直接获取当前状态
                    this.parentNode.querySelector('span').innerText = '匿名：' + (event.detail.isActive ? '是' : '否');
                    if(event.detail.isActive){
                        $("input[name='anonymous']").val(1)
                    }else {
                        $("input[name='anonymous']").val(0)
                    }
                });
            });
    var btn = document.querySelectorAll(".mui-bar-tab a.mui-tab-item");
    for(var i = 0;i<btn.length;i++){
        btn[i].addEventListener("tap",function () {
            var href = this.getAttribute("href");
            if(href=="#top"){
                mui.scrollTo(0,500);
            }else if(href=="#shoucang"){
                //todo
                mui.toast("功能开发中。。。")
                return
            }else if(href=="#fenxiang"){
                //todo
                mui.toast("功能开发中。。。")
                return
            }else {
                mui.openWindow({url: href})
            }

        })
    }

</script>
{% endblock %}